<template>
  <view class="wrap">
    <view class="box">
      <view class="">流程</view>
      <view class="l-wrap">
        <view
          class="l-box flex-between"
          v-for="(item, index) in userList"
          :key="index">
          <view class="l-box-c"></view>
          <view class="l-box-line" v-if="index < userList.length - 1"></view>
          <view class="l-box-title">
            <view class="">{{ action[num][item.type] }}</view>
            <view class="">1人审核</view>
          </view>
          <view class="l-box-r flex-as">
            <view class="l-box-r-t column-flex-center">
              <image src="/static/order/3.png" mode="aspectFit"></image>
              <view class="">{{ item.user_name }}</view>
            </view>
            <!-- <image
	            class="arrow"
	            src="/static/order/arrow-1.png"
	            mode="aspectFit"></image>
	          <view class="l-box-r-add flex-center">
	            <image src="/static/order/6.png" mode="aspectFit"></image>
	          </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    formType: {
      type: String,
      default: "1",
    },
    type: {
      type: String,
      default: "1",
    },
    num: {
      type: String,
      default: "2",
    },
  },
  data() {
    return {
      userList: [],
      action: {
        1: {
          1: "生管部审核",
          2: "生产部确认",
          3: "财务审核",
        },
        2: {
          1: "主管审核",
          2: "经理审核",
          3: "财务审核",
        },
      },
    };
  },
  created() {
    this.getStatusUser();
  },
  methods: {
    //获取审核人
    getStatusUser() {
      this.$api({
        url: "/status_user",
        method: "get",
        data: {
          form_type: this.formType,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data = this.type == 1 ? res.data.slice(0, 2) : res.data;
          this.userList = res.data;
        }
      });
    },
  },
  watch: {
    formType: {
      handler(val) {
        if (val) {
          this.getStatusUser();
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background: #fff;
  padding: 0 32upx;

  .box {
    padding: 28upx 0;
    font-size: 32rpx;
    border-bottom: 1rpx solid #e4e4e4;

    & > view {
      font-size: 32rpx;
      color: #161616;
    }

    & > input {
      height: 28upx;
      margin-top: 28upx;
    }

    .box-b {
      margin-top: 28upx;

      & > input {
        height: 28upx;
      }

      & > image {
        width: 12upx;
        height: 21upx;
      }
    }

    ::-webkit-input-placeholder {
      color: #a0a0a0;
    }
  }

  .l-wrap {
    padding: 58upx 8upx 30upx 54upx;

    .l-box {
      position: relative;
      padding-bottom: 38upx;

      &-c {
        position: absolute;
        top: 22upx;
        left: -32upx;
        width: 16rpx;
        height: 16rpx;
        background: #d7d7d7;
        border-radius: 50%;
      }

      &-line {
        position: absolute;
        top: 28upx;
        left: -25upx;
        width: 2upx;
        height: 100%;
        background: #d7d7d7;
      }

      &-title {
        font-size: 24rpx;
        color: #a0a0a0;

        & > view:nth-of-type(1) {
          font-size: 32rpx;
          color: #3d3d3d;
          margin-bottom: 12upx;
        }
      }

      &-r {
        &-t {
          width: 200upx;
          font-size: 24rpx;
          color: #a0a0a0;

          & > image {
            width: 68rpx;
            height: 68rpx;
            margin-bottom: 8upx;
          }
        }

        .arrow {
          width: 32upx;
          height: 32upx;
          margin-left: 10upx;
          margin-right: 10upx;
          margin-top: 18upx;
        }

        &-add {
          width: 68rpx;
          height: 68rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 2rpx solid #ededed;

          & > image {
            width: 36upx;
            height: 36upx;
          }
        }
      }
    }
  }
}
</style>
